<template>
  <div>
    <x-header id="header" :left-options="{showBack: false}">产品</x-header>
    <div class="main-headerAndTab" v-if="pageReady">
      <tab active-color custom-bar-width="60px" v-model="current">
        <tab-item selected>热门产品</tab-item>
        <tab-item>更多产品</tab-item>
      </tab>
      <scroller
        ref="scrollerEvent"
        :scroll-bottom-offset="50"
        lock-x
        :use-pullup="true"
        :pullupConfig="{downContent:'↑',upContent:'',loadingContent:'请稍后',content:''}"
        @on-pullup-loading="pagePull"
        v-model="status">
        <div class="good-list" >
          <div class="item" v-for=" item in (current === 0 ? goodList:moreGoodList)" @click="goDetail(item.id)">
            <div class="left">
              <img class="icon" :src="item.picture"/>
            </div>
            <div class="right" :class="{ 'noBorder': item.title === '社保贷'}">
              <div class="title">{{item.title}}</div>
              <div class="explain">{{item.scope}}</div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
    <b-tabbar :value="1" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { getHotProductsList,getGoodsList } from '@/api/good'
import { cookie } from 'vux'

export default {
  name: 'good',
  components: {
    bTabbar,
  },
  data () {
    return {
      loginStatus: false,
      pageReady: false,
      current: 0,
      goodList: [],
      moreGoodList: [],
      cp: 1,
      lp: 1,
      mcp: 1,
      mlp: 1,
      status:{
        pullupStatus: ''
      }
    }
  },
  methods: {
    goDetail (id) {
      if (this.loginStatus) {
        this.$router.push({
          name: 'goodDetail',
          query: {
            id: id
          }
        })
      } else {
        this.$vux.toast.text('请先登录')
        setTimeout(() => {
          this.$router.replace('registrationLogin')
        }, 1500)
      }

    },
    pagePull () {
      if (this.current === 0) {
        if (this.cp < this.lp) {
          getHotProductsList(this.cp + 1).then( data => {
            this.cp = data.current_page
            this.lp = data.last_page
            this.goodList = [...this.goodList, ...data.data]
            sessionStorage.setItem('good_goodList', JSON.stringify({cp:this.cp,lp:this.lp,goodList:this.goodList}))
          })
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
          }, 500)
        } else {
          this.$vux.toast.text('暂无更多')
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
            this.$refs.scrollerEvent.reset({top: 0, easing:'ease-in'})
          }, 200)
        }
      } else if (this.current === 1) {
        if (this.mcp < this.mlp) {
          getGoodsList(this.mcp + 1).then( data => {
            this.mcp = data.current_page
            this.mlp = data.last_page
            this.moreGoodList = [...this.moreGoodList, ...data.data]
            sessionStorage.setItem('good_moreGoodList', JSON.stringify({mcp:this.mcp,mlp:this.mlp,moreGoodList:this.moreGoodList}))
          })
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
          }, 500)
        } else {
          this.$vux.toast.text('暂无更多')
          setTimeout(() => {
            this.$set(this.status,'pullupStatus','default')
            this.$refs.scrollerEvent.reset({top: 0, easing:'ease-in'})
          }, 200)
        }
      }
    },
  },
  mounted () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    if (this.globalData.cid) {
      this.loginStatus = true
    }
    const goodList = sessionStorage.getItem('good_goodList')
    if (!goodList) {
      getHotProductsList().then( data => {
        this.cp = data.current_page
        this.lp = data.last_page
        this.goodList = data.data
        this.pageReady = true
        if (this.goodList.length) {
          sessionStorage.setItem('good_goodList', JSON.stringify({cp:this.cp,lp:this.lp,goodList:this.goodList}))
        }
      })
    } else {
      Object.assign(this, JSON.parse(goodList))
      this.pageReady = true
    }
    const moreGoodList = sessionStorage.getItem('good_moreGoodList')
    if (!moreGoodList) {
      getGoodsList().then( data => {
        this.mcp = data.current_page
        this.mlp = data.last_page
        this.moreGoodList = data.data
        this.pageReady = true
        if (this.moreGoodList.length) {
          sessionStorage.setItem('good_moreGoodList', JSON.stringify({mcp:this.mcp,mlp:this.mlp,moreGoodList:this.moreGoodList}))
        }
      })
    } else {
      Object.assign(this, JSON.parse(moreGoodList))
      this.pageReady = true
    }
  }
}
</script>

<style scoped>
.good-list {
  background: #ffffff;
  margin-top: 1rem;
  margin-bottom: 85px;
}
.good-cell {
  display: flex;
}
.cell-left {
  padding: 1rem;
}
.cell-right {
  padding: 1rem 1rem 1rem 0;
  flex: 1;
  border-bottom: 1px solid #f0f0f0;
}
.cell-icon {
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
}
.cell-title {
  color: #5B5B5B;
  line-height: 1.5rem;
}
.cell-explain {
  font-size: 0.85rem;
  color: #A6A6A6;
  line-height: 1.5rem;
}
.noBorder {
  border:none
}
</style>
